<template>
    <div class="uploadModeList3d">
        <loading v-if="!itemMsg" loadingStyle="height:400px"></loading>
        <div v-else>
            <ul class="infoBoxChild clearfix">
                <li v-for="item in itemMsg.data.items[modeType]" :key="item.id">
                    <router-link :to="{path:toUrl,query:{modeId:item.id}}">
                    <!-- <div class="vipIcon">
                        <img src="../../img/vipIcon.png" alt="">
                    </div> -->
                    <div class="infoImg">
                        <img :src="item.image" alt="">
                        <div class="clearfix infoTextBox">
                            <div class="infoText">
                                <p class="vipText" :title="item.title">{{item.title}}</p>
                                <p class="infoItemId">下载时间:&nbsp<span>{{item.created_at}}</span></p>
                            </div>
                        </div>
                    </div>
                    </router-link>
                </li>
            </ul>
            <page :pageItem="pageitem" style="width: 100%;" @pageChange="getMsg"></page>
        </div>
        <div v-if="itemMsg&&itemMsg.data.items[modeType].length==0" class="nullContent">
            暂无内容
        </div>
    </div>
</template>
<script>
import loading from '../../../loading.vue'
import page from '../../../page.vue'
    export default{
        name : "modeList",
        props: ["toUrl","modeType","sort"],
        data(){
            return {
                msg: "模型列表",
                itemMsg:"",
                pageitem:""
            }
        },
        components:{
            page,
            loading
        },
        methods: {
            getMsg(value){//翻页
                axios.get("/userdowns/"+this.modeType+"/getItems?page="+value)
                .then(response=>{
                    this.itemMsg = response.data;
                })
            }
        },
        created () {
            axios.get("/userdowns/"+this.modeType+"/getItems")
            .then(response=>{
                this.itemMsg = response.data;
                this.pageitem = response.data;
            })
        }
    }
</script>
<style>
@import "../../../../css/global.css";
.uploadModeList3d .infoBoxChild li{
    width: 220px!important;
    height: 164px!important;
    margin-right: 10px;
    padding: 0;
}
.uploadModeList3d .infoBoxChild li:hover{
    background: transparent;
    box-shadow:none;
}
.uploadModeList3d .vipText{
    color: #fff;
    text-align: center;
    font-size: 16px;
    line-height: 40px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.uploadModeList3d .infoImg img{
    width: 220px;
    height: 164px;
}
.uploadModeList3d .infoImg{
    height: 164px;
}
.uploadModeList3d .infoTextBox{
    top: 120px;
}
.uploadModeList3d .infoBoxChild li:hover .infoTextBox{
    padding-top: 65px;
    top:0;
}
.checkStatus{
    position: absolute;
    top: 13px;
    right: 14px;
    width: 60px;
    font-size: 14px;
    line-height: 22px;
    color: #fff;
    background: #ea514b;
    border-radius: 2px;
    text-align: center;
}
.nullContent{
    text-align: center;
    font-size: 25px;
    line-height: 40px;
    height: 400px;
}
</style>

